<template>
  <div class="choice-container">
    <el-card class="box-card">
      <!-- 新增试题 -->
      <el-row class="add">
        <el-button type="success" @click="goAdd">
          <i class="el-icon-edit"></i>
          新增试题
        </el-button>
      </el-row>
      <!-- 筛选区域 -->
      <el-form ref="form" :model="queryInfo" label-width="80px">
        <!-- 第一行筛选 -->
        <el-row>
          <!-- 学科 -->
          <el-col :span="6">
            <el-form-item label="学科" prop="subjectID">
              <el-select
                @change="loadcataList"
                v-model="queryInfo.subjectID"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in subjectList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 二级目录 -->
          <el-col :span="6">
            <el-form-item label="二级目录" prop="catalogID">
              <el-select v-model="queryInfo.catalogID" placeholder="请选择">
                <el-option
                  v-for="item in catalogList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 标签 -->
          <el-col :span="6">
            <el-form-item label="标签" prop="tags">
              <el-select v-model="queryInfo.tags" placeholder="请选择">
                <el-option
                  v-for="item in tagList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 关键字 -->
          <el-col :span="6">
            <el-form-item label="关键字" prop="keyword">
              <el-input v-model="queryInfo.keyword"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第二行筛选 -->
        <el-row>
          <!-- 试题类型 -->
          <el-col :span="6">
            <el-form-item label="试题类型" prop="questionType">
              <el-select v-model="queryInfo.questionType" placeholder="请选择">
                <el-option label="单选" value="1"></el-option>
                <el-option label="多选" value="2"></el-option>
                <el-option label="简单" value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 难度 -->
          <el-col :span="6">
            <el-form-item label="难度" prop="difficulty">
              <el-select v-model="queryInfo.difficulty" placeholder="请选择">
                <el-option label="简单" value="1"></el-option>
                <el-option label="一般" value="2"></el-option>
                <el-option label="困难" value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 方向 -->
          <el-col :span="6">
            <el-form-item label="方向" prop="direction">
              <el-select v-model="queryInfo.direction" placeholder="请选择">
                <el-option label="o2o" value="o2o"></el-option>
                <el-option label="外包服务" value="外包服务"></el-option>
                <el-option label="企业服务" value="企业服务"></el-option>
                <el-option label="互联网金融" value="互联网金融"></el-option>
                <el-option label="企业咨询" value="企业咨询"></el-option>
                <el-option label="互联网" value="互联网"></el-option>
                <el-option label="电子商务" value="电子商务"></el-option>
                <el-option label="其他" value="其他"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 录入人 -->
          <el-col :span="6">
            <el-form-item label="录入人" prop="creatorID">
              <el-select
                v-model="queryInfo.creatorID"
                placeholder="请选择"
                class="inputMan"
              >
                <el-option
                  v-for="item in creator"
                  :key="item.id"
                  :label="item.username"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第三行筛选 -->
        <el-row>
          <!-- 题目备注 -->
          <el-col :span="6">
            <el-form-item label="题目备注" prop="remarks">
              <el-input v-model="queryInfo.remarks"></el-input>
            </el-form-item>
          </el-col>
          <!-- 企业简称 -->
          <el-col :span="6">
            <el-form-item label="企业简称" prop="shortName">
              <el-input v-model="queryInfo.shortName"></el-input>
            </el-form-item>
          </el-col>
          <!-- 城市 -->
          <el-col :span="6">
            <el-form-item label="城市" class="city" prop="city">
              <el-select
                class="city-item city-item1"
                v-model="queryInfo.city"
                placeholder="请选择"
                @change="loadCitys"
              >
                <el-option
                  v-for="(item, index) in cityList"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
              <el-select
                class="city-item"
                v-model="queryInfo.province"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in citysList"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 按钮 -->
          <el-col :span="6">
            <el-form-item class="screen-button">
              <el-button @click="clear">清除</el-button>
              <el-button type="primary" @click="loadChoiceList">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- tab栏区域 -->
      <el-row>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <!-- 全部 -->
          <el-tab-pane label="全部" name="first">
            <choice-tab
              :choice-list="choiceList"
              @previewOn="onPreviewDia($event)"
              @stateOn="onStateDia($event)"
              @Put="goAdd($event)"
              @shelf="isShelf($event)"
              @del="removeque($event)"
            ></choice-tab>
          </el-tab-pane>
          <!-- 待审核 -->
          <el-tab-pane label="待审核" name="0">
            <choice-tab
              :choice-list="choiceList"
              @previewOn="onPreviewDia($event)"
              @stateOn="onStateDia($event)"
              @Put="goAdd($event)"
              @shelf="isShelf($event)"
              @del="removeque($event)"
            ></choice-tab>
          </el-tab-pane>
          <!-- 已审核 -->
          <el-tab-pane label="已审核" name="1">
            <choice-tab
              :choice-list="choiceList"
              @previewOn="onPreviewDia($event)"
              @stateOn="onStateDia($event)"
              @Put="goAdd($event)"
              @shelf="isShelf($event)"
              @del="removeque($event)"
            ></choice-tab>
          </el-tab-pane>
          <!-- 已拒绝 -->
          <el-tab-pane label="已拒绝" name="2">
            <choice-tab
              :choice-list="choiceList"
              @previewOn="onPreviewDia($event)"
              @stateOn="onStateDia($event)"
              @Put="goAdd($event)"
              @shelf="isShelf($event)"
              @del="removeque($event)"
            ></choice-tab>
          </el-tab-pane>
        </el-tabs>
      </el-row>
      <!-- 分页 -->
      <el-row>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          :current-page.sync="queryInfo.page"
          :page-sizes="[1, 2, 5, 10]"
          :page-size="queryInfo.pagesize"
          layout="sizes, prev, pager, next, jumper"
          :total="choiceList.length"
        >
        </el-pagination>
      </el-row>
    </el-card>

    <!-- 预览对话框 -->
    <el-dialog
      title="题目预览"
      :visible.sync="previewDialogVisible"
      width="50%"
    >
      <choice-preview
        :scope-obj-esay="scopeObjesay"
        :scope-obj="scopeObj"
        v-if="previewDialogVisible"
      ></choice-preview>
      <span slot="footer" class="dialog-footer">
        <el-button @click="previewDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="previewDialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 审核对话框 -->
    <el-dialog title="审核" :visible.sync="stateDialogVisible" width="30%">
      <div>
        <el-radio-group v-model="isState">
          <el-radio :label="1">通过</el-radio>
          <el-radio :label="2">拒绝</el-radio>
        </el-radio-group>
        <el-input
          type="textarea"
          v-model="stateText"
          placeholder="请输入审核意见"
        ></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="stateDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="StateState">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 上架下架对话框 -->
    <el-dialog title="提示" :visible.sync="shelfDialogVisible" width="30%">
      <span
        >您确定要{{
          details.publishState === "上架" ? "下架" : "上架"
        }}这道题目吗?</span
      >
      <span slot="footer" class="dialog-footer">
        <el-button @click="shelfDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="Onshelf">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 导入获取学科简单列表
import { simple } from "@/api/hmmm/subjects";
// 导入获取目录简单列表
import { simple as simple1 } from "@/api/hmmm/directorys";
// 导入获取标签简单列表
import { simple as simpleTag } from "@/api/hmmm/tags";
// 导入获取录入人
import { simple as simpleUser } from "@/api/base/users";
// 导入城市列表
import { provinces, citys } from "@/api/hmmm/citys";
// 导入获取精选题库列表和基础题库详情
import { choice, detail, choiceAdd } from "@/api/hmmm/questions";
// 导入表格组件
import choiceTab from "../components/choiceTab";
// 导入预览组件
import ChoicePreview from "../components/choicePreview.vue";
// 导入试题审核
import { choiceCheck } from "@/api/hmmm/questions";
// 导入精选题库上下架
import { choicePublish } from "@/api/hmmm/questions";
export default {
  data() {
    return {
      queryInfo: {
        // 学科
        subjectID: null,
        // 标签名称
        tags: null,
        // 关键字
        keyword: null,
        // 试题类型
        questionType: null,
        // 难度
        difficulty: null,
        // 方向
        direction: null,
        // 录入人
        creatorID: null,
        // 题目备注
        remarks: null,
        // 企业简称
        shortName: null,
        // 企业所在城市
        city: null,
        // 企业所在省份
        province: null,
        // 审核状态
        chkState: null,
        // 目录
        catalogID: null,
        // 页数
        page: 1,
        // 一页显示几个
        pagesize: 10
      },
      activeName: "first",
      // 简单学科列表
      subjectList: [],
      // 简单目录列表
      catalogList: [],
      // 简单标签列表
      tagList: [],
      // 录入人列表
      creator: [],
      // 城市列表
      cityList: [],
      // 城市下地区列表
      citysList: [],
      // 精选题库
      choiceList: [],
      // 预览对话框的显示与隐藏
      previewDialogVisible: false,
      // 试题详情
      scopeObj: {},
      // 简单试题详情
      scopeObjesay: {},
      // 审核对话框的显示与隐藏
      stateDialogVisible: false,
      // 是否通过
      isState: "",
      // 审核意见
      stateText: "",
      // 当前点击的目标详情
      details: {},
      // 上下架对话框的显示与隐藏
      shelfDialogVisible: false,
      // 删除对话框的显示与隐藏
      delDialogVisible: false
    };
  },
  methods: {
    // 获取筛选数据
    async loadChoice() {
      try {
        // 获取学科简单列表
        const { data } = await simple();
        this.subjectList = data;
        console.log(this.subjectList);

        // 获取录入人
        const res = await simpleUser({
          data: this.queryInfo.keyword
        });
        this.creator = res.data;

        // 获取城市列表F
        const city = provinces();
        this.cityList = city;
      } catch (err) {
        this.$toast.fail("获取失败");
      }
    },
    // 第一个下拉框发生变化的时候获取二级目录和标签列表
    async loadcataList() {
      // 获取目录简单列表
      const res = await simple1({
        data: this.queryInfo.subjectID
      });
      this.catalogList = res.data;

      // 获取标签简单列表
      const { data } = await simpleTag({
        data: this.queryInfo.subjectID
      });
      this.tagList = data;
    },
    // 获取城市下地区
    loadCitys() {
      const res = citys(this.queryInfo.city);
      console.log(res);
      this.citysList = res;
    },
    // 获取精选题库
    async loadChoiceList() {
      const { data } = await choice(this.queryInfo);
      //  const { data } = await choice({ params: this.queryInfo });
      console.log(data);
      this.choiceList = data.items;
      console.log(this.choiceList);
      // 处理题型
      this.choiceList.forEach(item => {
        if (item.questionType === "1") {
          item.questionType = "单选";
        } else if (item.questionType === "2") {
          item.questionType = "多选";
        } else if (item.questionType === "3") {
          item.questionType = "简单";
        }
      });
      // 处理难度
      this.choiceList.forEach(item => {
        if (item.difficulty === "1") {
          item.difficulty = "简单";
        } else if (item.difficulty === "2") {
          item.difficulty = "一般";
        } else if (item.difficulty === "3") {
          item.difficulty = "困难";
        }
      });
      // 处理审核状态
      this.choiceList.forEach(item => {
        if (item.chkState === 0) {
          item.chkState = "待审核";
        } else if (item.chkState === 1) {
          item.chkState = "通过";
        } else if (item.chkState === 2) {
          item.chkState = "拒绝";
        }
      });
      // 处理发布状态
      this.choiceList.forEach(item => {
        if (item.publishState === 1) {
          item.publishState = "上架";
        } else if (item.publishState === 0) {
          item.publishState = "下架";
        }
      });
    },
    // tab栏切换的时候触发
    handleClick(tab, event) {
      switch (this.activeName) {
        case "first":
          this.queryInfo.chkState = null;
          this.loadChoiceList();
          break;
        case "0":
          this.queryInfo.chkState = "0";
          this.loadChoiceList();
          break;
        case "1":
          this.queryInfo.chkState = "1";
          this.loadChoiceList();
          break;
        case "2":
          this.queryInfo.chkState = "2";
          this.loadChoiceList();
          break;
      }
      // this.queryInfo.chkState = tab.name;
      // this.loadChoiceList();
    },
    // 切换每页显示条数
    handleSizeChange(val) {
      this.queryInfo.pagesize = val;
      this.loadChoiceList();
    },
    // 翻页的时候触发
    handleCurrentChange(val) {
      this.queryInfo.page = val;
      this.loadChoiceList();
    },
    // 清空表单
    clear() {
      this.$refs.form.resetFields();
      this.queryInfo.province = "";
    },
    // 新增试题
    goAdd(event) {
      // console.log(event);
      this.$router.push({ path: "/questions/new", params: { id: event.id } });
    },
    // 点击预览进行的操作
    async onPreviewDia(val) {
      console.log(val);
      this.scopeObjesay = val;
      const { data } = await detail(val);
      console.log(data);
      this.scopeObj = data;
      this.previewDialogVisible = true;
    },
    // 点击审核
    onStateDia(val) {
      this.details = val;
      console.log(this.details);
      this.stateDialogVisible = true;
    },
    // 点击审核弹窗的确定
    StateState() {
      if (!this.stateText) {
        this.$message.error("请输入审核意见");
        return;
      }
      try {
        choiceCheck({
          id: this.details.id,
          chkState: this.isState,
          chkRemarks: this.stateText
        });
        this.$message.success("审核成功");
        this.loadChoiceList();
      } catch (err) {
        this.$message.error("审核失败");
      }
      this.stateDialogVisible = false;
    },
    // 点击上下架弹窗
    isShelf(val) {
      this.shelfDialogVisible = true;
      this.details = val;
      console.log(val);
    },
    // 点击确定
    Onshelf() {
      try {
        if (this.details.publishState === "上架") {
          choicePublish({
            id: this.details.id,
            publishState: 0
          });
          this.$message.success("下架成功");
        } else {
          choicePublish({
            id: this.details.id,
            publishState: 1
          });
          this.$message.success("上架成功");
        }
        this.loadChoiceList();
      } catch (err) {
        this.$message.error("操作失败");
      }
      this.shelfDialogVisible = false;
    },
    // 点击删除
    removeque(val) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          choiceAdd({ id: val.id, choiceState: 0 });
          this.$message({
            type: "success",
            message: "删除成功!"
          });
          this.loadChoiceList();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  },
  created() {
    this.loadChoiceList();
    this.loadChoice();
  },
  components: {
    choiceTab,
    ChoicePreview
  }
};
</script>

<style scoped lang="less">
.choice-container {
  padding: 0 13px;
  .add {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 19px;
  }
  .el-select--medium {
    width: 100%;
  }
  .city-item {
    width: 47.9%;
  }
  .city-item1 {
    margin-right: 10px;
  }
  .screen-button {
    display: flex;
    justify-content: flex-end;
  }
  .el-alert {
    margin-bottom: 15px;
  }
  .el-radio-group {
    margin-bottom: 20px;
  }
}
</style>
